<template>
  <!-- CheckOrder盘点单 -->
  <div style="position: relative;">
    <el-card style="height: calc( 100vh - 85px); overflow:auto; ">
      <!-- 信息搜索框 -->
      <el-form v-model="queryObj" label-width="100px" size="large">
        <el-row>
          <el-col :span="7" style="margin-right:15px">
            <el-form-item label="拥有者：">
              <el-input v-model.trim="queryObj.owner" placeholder="请输入拥有者" />
            </el-form-item>
          </el-col>
          <el-col :span="7" style="margin-right:15px">
            <el-form-item label="等级：">
              <el-input v-model.trim="queryObj.level" placeholder="请输入等级" />
            </el-form-item>
          </el-col>
          <el-col v-show="isopen" :span="7" style="margin-right:15px">
            <el-form-item label="出库单号：">
              <el-input v-model.trim="queryObj.orderId" placeholder="请输入出库单号" />
            </el-form-item>
          </el-col>
          <el-col v-show="isopen" :span="7" style="margin-right:15px">
            <el-form-item label="终点：">
              <el-input v-model.trim="queryObj.toLoc" placeholder="请输入终点" />
            </el-form-item>
          </el-col>
          <el-col v-show="isopen" :span="7" style="margin-right:15px">
            <el-form-item label="机种：">
              <el-input v-model.trim="queryObj.deviceType" placeholder="请输入箱机种" />
            </el-form-item>
          </el-col>
          <el-col v-show="isopen" :span="7" style="margin-right:15px">
            <el-form-item label="出库描述：">
              <el-input v-model.trim="queryObj.tasksDetail" placeholder="请输入出库描述" />
            </el-form-item>
          </el-col>
          <el-col v-show="isopen" :span="7" style="margin-right:15px">
            <el-form-item label="栈板类型：">
              <el-input v-model.trim="queryObj.palletType" placeholder="请输入栈板类型" />
            </el-form-item>
          </el-col>
          <el-col v-show="isopen" :span="7" style="margin-right:15px">
            <el-form-item label="出库单状态：">
              <el-input v-model.trim="queryObj.orderStatus" placeholder="请输入出库单状态" />
            </el-form-item>
          </el-col>
          <el-col v-show="isopen" :span="7" style="margin-right:15px;">
            <el-form-item label="时间：">
              <el-date-picker v-model="timestart_end" style="width:100%" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy/MM/dd HH:mm:ss"
                value-format="yyyy/MM/dd HH:mm:ss" @change="handleDataChanged" range-separator="至" :default-time="['00:00:00', '23:59:59']" />
            </el-form-item>
          </el-col>
          <searchbutton :isopen="isopen" @isopenclickfn="isopenclick" @resetQueryfn="resetQuery" @queryClickfn="queryClick" />

        </el-row>

      </el-form>
      <!-- 调整状态按钮 -->
      <el-row style="margin-bottom:10px">
        <div style="float:left">
          <!-- <el-button v-permission="'main-task-create'" type="primary" plain @click="centerDialogVisible = true"><i class="el-icon-plus" /> 创建任务</el-button> -->
        </div>
        <!-- 右侧公用按钮功能 -->
        <div style="float:right">
          <div style="font-size:30px;display: inline-block;margin-right:5px">
            <a href="#">
              <el-tooltip class="item" effect="dark" content="列位置" placement="top" style="cursor:pointer">
                <el-dropdown trigger="click" :hide-on-click="false">
                  <span class="el-dropdown-link">
                    <i class="el-icon-s-grid el-icon--right" style="font-size:24px;color:black" />
                  </span>
                  <el-dropdown-menu slot="dropdown" style=" width:190px;height:300px;overflow:auto">
                    <el-dropdown-item><el-checkbox v-model="deleteCell.isowner">拥有者</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.islevel">等级</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.isorderId">出库单号</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.istoLoc">终点</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.isdeviceType">机种</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.istasksDetail">出库描述</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.ispalletType">栈板类型</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.isorderStatus">出库单状态</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.iscreatedTime">创建时间</el-checkbox></el-dropdown-item>
                    <el-dropdown-item><el-checkbox v-model="deleteCell.islastUpdateTime">最后更新时间</el-checkbox></el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-tooltip>
            </a>
          </div>
          <!-- 右侧公用按钮功能组件 -->
          <functionButton style="float:right" :refresh-click="refreshClick" :table-data="tableData" :table-data-all="tableDataAll" :headers-arr="headersArr" :headers-relations="headersRelations"
            @exportAllfn="exportAll" />
        </div>
      </el-row>
      <!-- 任务总表 -->
      <el-table v-if="tableData.taskId !== ''" ref="mainTable" v-loading="listLoading" :data="tableData" border :row-style="{height:'40px'}" :cell-style="{padding:'0px'}"
        style="width: 100%;  margin-bottom: 10px;overflow:auto;">
        <el-table-column fixed="left" width="100" align="center">
          <template slot-scope="scopedata">
            <el-tooltip class="item" effect="dark" content="关闭" placement="top">
              <el-button v-permission="'OutboundOrder-delete'" type="text" size="small" @click="InboundDelete(scopedata.row)"><i class="el-icon-switch-button"
                  style="color:red;font-size:20px" /></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="开始" placement="top">
              <el-button v-permission="'OutboundOrder-finish'" type="text" size="small" @click.native="handleUpdate(scopedata.row)"><i class="el-icon-caret-right"
                  style="font-size:20px;color:#67C23A;" /></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column v-if="deleteCell.isowner" prop="owner" label="拥有者" width="100" show-overflow-tooltip />
        <el-table-column v-if="deleteCell.islevel" prop="level" label="等级" width="60" align="center" />
        <el-table-column v-if="deleteCell.isorderId" prop="orderId" label="出库单号" width="180" show-overflow-tooltip />
        <el-table-column v-if="deleteCell.istoLoc" prop="toLoc" label="终点" width="160" show-overflow-tooltip />
        <el-table-column v-if="deleteCell.isdeviceType" prop="deviceType" label="机种" width="160" />
        <el-table-column v-if="deleteCell.istasksDetail" prop="tasksDetail" label="出库描述" width="200" show-overflow-tooltip />
        <el-table-column v-if="deleteCell.ispalletType" prop="palletType" label="栈板类型" width="140" />
        <el-table-column v-if="deleteCell.isorderStatus" prop="orderStatus" label="出库单状态" width="140" />
        <el-table-column v-if="deleteCell.iscreatedTime" prop="createdTime" label="创建时间" width="160" show-overflow-tooltip />
        <el-table-column v-if="deleteCell.islastUpdateTime" prop="lastUpdateTime" label="最后更新时间" width="160" show-overflow-tooltip />
      </el-table>
      <!-- 分页组件 -->
      <paging :pagion-obj="pagionObj" :handle-size-change="handleSizeChange" :handle-page-change="handlePageChange" />

    </el-card>
  </div>
</template>

<script>
import { GetWmsInventoryOrderApi, UpdateOrderApi } from "@/api/CheckManageApi";
import { Message } from "element-ui";
import permission from "@/permission/index.js"; // 权限判断指令
export default {
  name: "CheckOrder",
  directives: { permission },
  data() {
    return {
      queryObj: {
        owner: "", // 拥有者
        level: "", // 等级
        orderId: "", // 出库单号
        toLoc: "", // 终点
        deviceType: "", // 机种
        tasksDetail: "", // 出库描述
        palletType: "", // 栈板类型
        orderStatus: "", // 出库单状态
        page: 0, // 第几页
        size: 0, // 每页条数
        startTime: "0001/1/1 0:00:00", // 开始日期
        endTime: "0001/1/1 0:00:00", // 结束日期
      },
      // 分页页码数据
      pagionObj: {
        size: 10,
        currentPage: 1,
        total: 100,
      },
      // 请求返回的数据
      tableData: [],
      tableDataAll: [],
      // 时间的数据
      timestart_end: [],
      isopen: false,
      // loding效果显示
      listLoading: true,
      // 列位置 数据
      deleteCell: {
        isowner: true,
        islevel: true,
        isorderId: true,
        istoLoc: true,
        isdeviceType: true,
        istasksDetail: true,
        ispalletType: true,
        isorderStatus: true,
        iscreatedTime: true,
        islastUpdateTime: true,
      },
      // excel 数据的key 表头数据
      headersArr: [
        "拥有者",
        "等级",
        "出库单号",
        "终点",
        "机种",
        "出库描述",
        "栈板类型",
        "出库单状态",
        "创建时间",
        "最后更新时间",
      ],
      // 将表头转换成中文
      headersRelations: {
        拥有者: "owner",
        等级: "level",
        出库单号: "orderId",
        终点: "toLoc",
        机种: "deviceType",
        出库描述: "tasksDetail",
        栈板类型: "palletType",
        出库单状态: "orderStatus",
        创建时间: "createdTime",
        最后更新时间: "lastUpdateTime",
      },
    };
  },
  // 监视时间变化
  watch: {
    timestart_end(newData) {
      if (newData !== null && newData.length > 0) {
        this.queryObj.startTime = this.timestart_end[0];
        this.queryObj.endTime = this.timestart_end[1];
      } else {
        this.queryObj.startTime = "0001/1/1 0:00:00";
        this.queryObj.endTime = "0001/1/1 0:00:00";
      }
    },
  },
  mounted() {
    this.queryData();
  },
  methods: {
    /** 获取页面数据*/
    async queryData() {
      this.listLoading = true;
      this.queryObj.size = this.pagionObj.size;
      this.queryObj.page = this.pagionObj.currentPage;
      const res = await GetWmsInventoryOrderApi(this.queryObj);
      this.tableData = res.data.data;
      this.pagionObj.pageCount = res.data.pageCount;
      this.pagionObj.total = res.data.count;
      this.listLoading = false;
    },
    // 搜索按钮
    queryClick() {
      this.pagionObj.currentPage = 1;
      this.queryData();
    },
    // 刷新按钮
    refreshClick() {
      this.listLoading = true;
      this.queryData();
      this.listLoading = false;
    },
    /** 每页显示数据变化*/
    handleSizeChange(val) {
      this.pagionObj.size = val;
      this.queryData();
    },
    /** 当前页变化*/
    handlePageChange(val) {
      this.pagionObj.currentPage = val;
      this.queryData();
    },
    // 时间选择器处理
    handleDataChanged() {
      if (this.timestart_end !== null) {
        this.queryObj.startTime = this.timestart_end[0];
        this.queryObj.endTime = this.timestart_end[1];
      } else {
        this.queryObj.startTime = "0001/1/1 0:00:00";
        this.queryObj.endTime = "0001/1/1 0:00:00";
      }
    },
    // 展开收起
    isopenclick() {
      this.isopen = !this.isopen;
    },
    // 重置按钮
    resetQuery() {
      this.queryObj.owner = ""; // 拥有者
      this.queryObj.level = null; // 等级
      this.queryObj.orderId = ""; // 出库单号
      this.queryObj.toLoc = ""; // 终点
      this.queryObj.deviceType = ""; // 机种
      this.queryObj.tasksDetail = ""; // 出库描述
      this.queryObj.palletType = ""; // 栈板类型
      this.queryObj.orderStatus = ""; // 出库单状态
      this.timestart_end = [];
    },
    // 关闭按钮
    async InboundDelete(data) {
      console.log(data, "data");
      // 获取表格被选中的数据
      // console.log(this.$refs.mainTable.selection)
      // const numid = this.$refs.mainTable.selection.map(item => item.id)
      // console.log(numid)
      // if (!numid.length > 0) return
      // console.log(numid, '删除的id')
      this.$confirm("确认删除该任务吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          // console.log('确认')
          await UpdateOrderApi({ id: data.id, orderStatus: "Delete" });
          Message.success("删除成功");
          this.queryData();
          setTimeout(() => {
            this.queryData();
          }, 1000);
        })
        .catch(() => {
          // console.log('取消')
        });
    },

    // 开始按钮
    async handleUpdate(data) {
      // console.log(data, 'data')
      // console.log({ taskId: data.id, taskStatus: 3 })
      this.$confirm("确认完成该任务吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          // console.log('确认')
          await UpdateOrderApi({ id: data.id, orderStatus: "Finished" });
          Message.success("操作成功");
          this.queryData();
        })
        .catch(() => {
          // console.log('取消')
        });
    },
    // excel导出全部
    async exportAll() {
      const res2 = await GetWmsInventoryOrderApi({ size: 10000 });
      this.tableDataAll = res2.data.data;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

